其他
公司项目配置了 AJ-Captcha 验证码，竟然提升用户100%验证率！
公司项目配置了 AJ-Captcha 验证码，竟然提升用户100%验证率！
在当今数字化的时代，用户验证对于保障公司项目的安全性和可靠性至关重要。为了提升用户验证的效率和准确性，我们在项目中引入了 AJ-Captcha 验证码，并取得了令人瞩目的成果——用户验证率竟然提升了 100%！接下来，让我们深入探讨这一神奇转变背后的技术实现。
AJ-Captcha 行为验证码包含滑动拼图、文字点选两种方式，UI 支持弹出和嵌入两种方式。后端提供 Java 实现，前端提供了 php、angular、html、vue、uni-app、flutter、android、ios 等代码示例。
为了实现高效的数据管理，我们在项目中采用了 MyBatis-Plus 作为数据库持久框架。MyBatis-Plus 简化了数据库操作，提供了强大的 CRUD 功能和便捷的分页查询等特性，大大提高了开发效率。
运行效果：
若想获取项目完整代码以及其他文章的项目源码，且在代码编写时遇到问题需要咨询交流，欢迎加入下方的知识星球。
项目配置
首先，让我们看看项目的 pom.xml 配置。以下是添加 Anji-plus 验证码和 MyBatis-Plus 相关依赖的部分
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.3.2</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.icoderoad</groupId>
<artifactId>AJ-Captcha</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>AJ-Captcha</name>
<description>AJ-Captcha Demo project for Spring Boot</description>
<properties>
<java.version>17</java.version>
<anji-plus.version>1.3.0</anji-plus.version>
<mybatis-spring.version>3.0.3</mybatis-spring.version>
<mybatis-plus-boot-starter.version>3.5.7</mybatis-plus-boot-starter.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 数据库驱动依赖 -->
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<!-- Anji-plus 验证码依赖 -->
<dependency>
<groupId>com.anji-plus</groupId>
<artifactId>captcha</artifactId>
<version>${anji-plus.version}</version>
</dependency>
<!-- MyBatis-Plus 依赖 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>${mybatis-plus-boot-starter.version}</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>${mybatis-spring.version}</version>
</dependency>
<!-- Redis 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- 其他依赖 -->
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-core</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
在 yaml 属性文件中，我们进行了相关的配置：
server:
port: 8080
# 数据库配置
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/captcha
username: root
password: root
redis:
host: localhost
password: 123456
port: 6379
# Anji-plus 验证码配置
aj:
captcha:
# 缓存类型
cache-type: redis
# blockPuzzle 滑块 clickWord 文字点选 default默认两者都实例化
type: blockPuzzle
# 校验滑动拼图允许误差偏移量(默认5像素)
slip-offset: 5
# aes加密坐标开启或者禁用(true|false)
aes-status: true
# 滑动干扰项(0/1/2)
interference-options: 0
# 右下角水印
water-mark: "路条编程"
数据库表设计
下面是用户表的 DDL 语句定义：
CREATE TABLE `users` (
`id` INT PRIMARY KEY AUTO_INCREMENT,
`username` VARCHAR(50) NOT NULL,
`password` VARCHAR(255) NOT NULL
);
INSERT INTO `users` (`username`, `password`)
VALUES ('admin', '$2a$10$RjHjpNXCK641apxBPd124ObuUr/MblGf4Sbegrpm8Wks/0yh7I2ve'); -- 这里假设使用 BCrypt 算法对 'admin123' 进行加密后的结果
MyBatis-Plus 相关代码实现
package com.icoderoad.AJ_Captcha.entity;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
@Data
@TableName("users")
public class User {
private Long id;
private String username;
private String password;
}
package com.icoderoad.AJ_Captcha.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.icoderoad.AJ_Captcha.entity.User;
public interface UserMapper extends BaseMapper<User> {
}
package com.icoderoad.AJ_Captcha.service;
import org.springframework.stereotype.Service;
import com.icoderoad.AJ_Captcha.entity.User;
@Service
public interface UserService {
User getUserByUsername(String username);
}
package com.icoderoad.AJ_Captcha.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.icoderoad.AJ_Captcha.entity.User;
import com.icoderoad.AJ_Captcha.mapper.UserMapper;
import com.icoderoad.AJ_Captcha.service.UserService;
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
@Override
public User getUserByUsername(String username) {
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("username", username);
return this.getOne(queryWrapper);
}
}
后端代码实现
package com.icoderoad.AJ_Captcha.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import com.icoderoad.AJ_Captcha.entity.User;
import com.icoderoad.AJ_Captcha.service.UserService;
import jakarta.servlet.http.HttpServletRequest;
@Controller
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/")
public String index(Model model) {
return "index";
}
@PostMapping("/login")
public ResponseEntity<Map<String, Boolean>> login(HttpServletRequest request) {
String username = request.getParameter("username");
String password = request.getParameter("password");
User user = userService.getUserByUsername(username);
boolean isAuthenticated = false;
BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
System.out.println(passwordEncoder.encode(password));;
if (user!= null && passwordEncoder.matches(password, user.getPassword())) {
isAuthenticated = true;
}
Map<String, Boolean> response = new HashMap<>();
response.put("success", isAuthenticated);
return new ResponseEntity<>(response, HttpStatus.OK);
}
}
前端页面实现
在前端，我们使用 Thymeleaf 模板结合 JavaScript 和 Bootstrap 来展示和验证验证码，并实现用户名、密码和验证码的登录验证功能。以下是相关代码片段：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>验证码示例</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/verify.css">
<script src="/js/crypto-js.js"></script>
<script src="/js/ase.js"></script>
<script src="/js/verify.js"></script>
<script>
(function () {
if (!window.Promise) {
document.writeln('<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><' + '/' +'script>');
}
})();
</script>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
margin-top: -80px;
width: 78%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
border: 1px solid gray;
padding: 25px;
}
form {
width: 80%;
}
.btn {
border: none;
outline: none;
width: 300px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
background-color: #409EFF;
color: #fff;
font-size: 16px;
letter-spacing: 1em;
}
</style>
</head>
<body>
<div class="container">
<h2>请登录</h2>
<form th:action="@{/login}" method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" />
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" />
</div>
<div class="form-group">
<button class="btn btn-primary" id='btn' type="button" >登录</button>
<div id="mpanel" style="margin-top:50px;"></div>
<div id="tip" style="margin-top:50px;"></div>
</div>
</form>
</div>
<script>
$('#mpanel').slideVerify({
baseUrl: 'http://localhost:8080',
mode: 'pop',
containerId: 'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
imgSize: {
width: '400px',
height: '200px'
},
barSize: {
width: '400px',
height: '40px'
},
beforeCheck: function () {
var name = $("#username").val();
var pass = $('#password').val();
if (name === '' || pass === '') {
$("#tip").html('<div class="alert alert-danger">请输入用户名和密码！</div>');
setTimeout(function() {
$("#tip div.alert").fadeOut(500);
}, 5000);
return false;
}
return true;
},
ready: function () {},
success: function (params) {
var name = $("#username").val();
var pass = $('#password').val();
$.ajax({
type: "POST",
url: "/login",
data: {
username: name,
password: pass
},
success: function (response) {
if (response.success) {
$("#tip").html('<div class="alert alert-success">登录成功</div>');
} else {
$("#tip").html('<div class="alert alert-danger">登录失败</div>');
}
setTimeout(function() {
$("#tip div.alert").fadeOut(500);
}, 5000);
},
error: function () {
$("#tip").html('<div class="alert alert-danger">登录请求出错</div>');
setTimeout(function() {
$("#tip div.alert").fadeOut(500);
}, 5000);
}
});
},
error: function () {}
});
</script>
</body>
</html>
通过以上前后端的协同工作，我们成功地配置了 AJ-Captcha 验证码，并实现了用户名、密码和验证码的登录验证功能，显著提升了用户验证率，为公司项目的安全性和用户体验提供了有力保障。